<template>
  <div class="area-scheme">
    <el-dialog v-model="dialogVisible" :before-close="handleClose">
      <template #header>
        <div class="my-header">
          <div>{{ state.title }}</div>
        </div>
      </template>
      <div class="scheme-box">
        <div class="name-box">
          <span>方案名称：</span>
          <el-input v-model="state.schemeName" placeholder="请输入" />
          <span>模型类型：</span>
          <el-select
            v-model="state.model"
            class="m-2"
            placeholder="请选择"
            @change="handleChangeModel"
          >
            <el-option
              v-for="item in state.modelArr"
              :key="item.modelType"
              :label="item.typeName"
              :value="Number(item.modelType)"
            />
          </el-select>
        </div>

        <!-- @@ -->
        <div class="config-info">
          <div class="content-box">
            <div class="content-left">
              <div class="left-title">控制断面名称</div>
              <div class="left-box">
                <div
                  :class="['box-item', state.current == index ? 'active' : '']"
                  :key="index"
                  v-for="(item, index) in state.secList"
                >
                  <span @click="handleClickSec(item, index)">{{ item.blknm }}</span>
                </div>
              </div>
            </div>
            <div class="content-right">
              <div class="right-title">
                区域计算方案设置区-
                <span>{{ state.secName }}</span>
              </div>
              <div class="right-box">
                <el-tabs type="border-card" @tab-click="handleTabsClcik">
                  <el-tab-pane label="洪水预报">
                    <div class="flood-form">
                      <div class="form-item">
                        <span class="name">模&nbsp;&nbsp;型&nbsp;&nbsp;名&nbsp;称&nbsp;:</span>
                        <span>
                          <el-select
                            v-model="state.form.chlMid"
                            class="m-2"
                            placeholder="请选择"
                            @change="handleChangeWaterFlood"
                          >
                            <el-option
                              v-for="item in state.waterflood"
                              :key="item.id"
                              :label="item.modelName"
                              :value="item.id"
                            />
                          </el-select>
                        </span>
                      </div>
                      <div class="form-item">
                        <span class="name">模型参数方案:</span>
                        <el-select
                          v-model="state.form.chlScid"
                          class="m-2"
                          placeholder="请选择"
                          @change="handleChangeParamsScheme"
                        >
                          <el-option
                            v-for="item in state.schemeParamsArr"
                            :key="item.id"
                            :label="item.name"
                            :value="Number(item.id)"
                          />
                        </el-select>
                        <span class="btn-color" @click="handleSearchParams">查看方案参数</span>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
          <!-- 弹窗 -->
          <ConfigParagm
            :dialogVisible="showDialog"
            @closeDialog="closeDig"
            :paramsDetail="paramsDetail"
          />
          <!-- 时空变源参数 -->
          <paramsSkby ref="paramsSkbyRef" />
        </div>

        <!-- @@ -->
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="handleSaveScheme">保存</el-button>
          <el-button @click="handleClose()">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, defineExpose } from 'vue'
import ConfigParagm from '../configInfo/cpns/configParagm.vue'
import { getXajParamsDetail } from '@/services/modules/model-config'
import paramsSkby from '@/components/app-publicui/params-skby.vue'
import { ElMessage } from 'element-plus'
import {
  getAreaSecList,
  getModel,
  getPmSchemes,
  saveAreaSchemes,
  getAreaSchemeConfig,
  getCalcModelType
} from '@/services/modules/compute-methods'
import { getModelList } from '@/services/modules/home'
const props = defineProps({
  watershedId: {
    type: Number,
    default: 1
  }
})
onMounted(() => {})
const dialogVisible = ref(false)
const paramsSkbyRef = ref(null)
const state = reactive({
  newItem: {},
  schemeParamsArr: [],
  model: '',
  modelArr: [],
  areaConfig: '',
  zId: '',
  title: '新建方案',
  paramConf: [],
  schemeId: '',
  schemeName: '',
  waterflood: [],
  form: {
    chlMid: 1,
    chlScid: ''
  },
  current: 0,
  secBlkcd: '',
  //洪水预报参数
  floodParams: ''
})
const emit = defineEmits(['closeDialog'])
const closeDialog = () => {
  emit('closeDialog', false)
}
//修改模型类型
async function handleChangeModel(val) {
  let arr = state.modelArr.filter((e) => {
    return e.modelType == val
  })
  state.model = val
  state.mid = Number(arr[0].code)
  // 获取模型名称列表
  getModelArr(val)
  await handleChangeParams(Number(arr[0].code))
}
//保存区域
function handleSaveScheme() {
  if (state.schemeId) {
    console.log('修改保存', state.paramConf)
    saveAreaSchemes({
      id: state.schemeId,
      zid: state.zId,
      model: state.model,
      scName: state.schemeName,
      paramConf: state.paramConf
    }).then((res) => {
      if (res.code === 200) {
        emit('handleClosePage')
        handleClose()
        ElMessage.success(res.msg)
      }
    })
  } else {
    console.log('新建保存', state.paramConf)
    saveAreaSchemes({
      //  id: state.schemeId,
      zid: state.zId,
      model: state.model,
      scName: state.schemeName,
      paramConf: state.paramConf
    }).then((res) => {
      if (res.code === 200) {
        emit('handleClosePage')
        handleClose()
        ElMessage.success(res.msg)
      }
    })
  }
}
async function handleOpenModal(value) {
  state.schemeName = ''
  state.zId = value.zId
  await getSecList(value.zId)

  dialogVisible.value = true
  // 获取模型类型
  await getCalcModelType().then((res) => {
    if (res.code === 200) {
      state.modelArr = res.data
      if (!value.row.id) {
        // 选中模型类型
        handleChangeModel(state.modelArr[0].modelType)
      }
    }
  })
  if (value.row.id) {
    state.schemeId = value.row.id
    state.title = '修改方案'
    state.schemeName = value.row.scName
    await getAreaSchemeConfigList(state.schemeId)
  } else {
    state.title = '新建方案'
    state.schemeId = ''
    handleChangeModel(state.modelArr[0].modelType)
    // 默认选中第一个断面
    handleClickSec(state.secList[0], 0)
  }
}
// 点击断面
async function handleClickSec(item, index) {
  console.log(state.paramConf, '参数信息')
  state.form.chlScid = 0
  state.current = index
  state.secName = item.blknm
  state.secBlkcd = item.blkcd
  if (state.schemeId) {
    let a = state.paramConf.filter((e) => {
      return e.blkcd == item.blkcd
    })

    let arr = state.waterflood.filter((e) => {
      return e.id == a[0].chlMid
    })
    let params = {
      modelType: arr[0]?.typeId,
      mid: a[0].chlMid,
      blkcd: item.blkcd,
      zid: state.zId
    }
    //获取参数方案
    await getPmSchemes(params).then((res) => {
      if (res.code === 200 && res.data?.length) {
        state.schemeParamsArr = res.data
        state.schemeParamsArr.push({ id: 0, name: '无' })
        // 参数方案名称
        state.floodParams = res.data[0].name
      } else {
        state.floodParams = '无'
        state.form.chlScid = 0
        state.schemeParamsArr = []
      }
    })
    state.form.chlMid = a[0].chlMid
    state.form.chlScid = a[0].chlScid
    state.floodParams = state.schemeParamsArr.filter((e) => {
      return e.id == a[0].chlScid
    })[0].name
  } else {
    console.log(state.waterflood, state.paramConf)
    let a = state.paramConf.filter((e) => {
      return e.blkcd == item.blkcd
    })
    let arr = state.waterflood.filter((e) => {
      return e.id == a[0].chlMid
    })

    let params = {
      modelType: arr[0]?.typeId,
      mid: a[0].chlMid,
      blkcd: item.blkcd,
      zid: state.zId
    }
    //获取参数方案
    await getPmSchemes(params).then((res) => {
      if (res.code === 200 && res.data?.length) {
        state.schemeParamsArr = res.data
        state.schemeParamsArr.push({ id: 0, name: '无' })
        // 参数方案名称
        state.floodParams = res.data[0].name
        state.form.chlMid = a[0].chlMid
        state.form.chlScid = a[0].chlScid
      } else {
        state.floodParams = '无'
        state.form.chlScid = 0
        state.schemeParamsArr = []
      }
    })
    console.log('123', state.paramConf, state.schemeParamsArr)

    if (state.schemeParamsArr.length) {
      state.floodParams = state.schemeParamsArr.filter((e) => {
        return e.id == a[0].chlScid
      })[0].name
    }
  }
}
//关闭
const closeDig = (v) => {
  showDialog.value = v
}
function handleChangeParams(chlMid) {
  state.secList = state.secList.map((e) => {
    return { ...e, chlScid: 0, chlMid: chlMid || 1 }
  })

  state.waterfloodParams1 = {
    modelType: state.model,
    mid: chlMid,
    zid: state.zId
  }
  if (chlMid === 0) {
    state.waterfloodParams1.mid = 1
    state.waterfloodParams1.modelType = 1
  }
  return new Promise((resolve, reject) => {
    //获取参数
    getPmSchemes(state.waterfloodParams1).then((res) => {
      if (res.code === 200 && res.data?.length) {
        let params = res.data.map((e) => {
          return {
            blkcd: e.blkcd,
            chlScid: e.id
          }
        })
        state.secList.forEach((item, index) => {
          params.forEach((e) => {
            if (item.blkcd == e.blkcd) {
              state.secList.splice(index, 1, { ...item, ...e })
            }
          })
        })

        // if (state.schemeId) {
        state.paramConf = state.secList

        // }
        resolve(state.paramConf)
      }
    })
  })
}
//修改洪水预报
//修改预报模型
// 点击模型名称
async function handleChangeWaterFlood(item) {
  state.newItem = item

  // // 获取所有模型参数
  let arr = state.waterflood.filter((e) => {
    return e.id == item
  })
  if (arr.length) {
    state.waterfloodParams = {
      modelType: arr[0].typeId,
      mid: arr[0].id,
      blkcd: state.secBlkcd,
      zid: state.zId
    }
    // console.log('arr',arr[0])
    //获取参数
    await getPmSchemes(state.waterfloodParams).then((res) => {
      if (res.code === 200 && res.data?.length) {
        console.log(res.data, 7777)
        // 获取的所有参数方案
        state.schemeParamsArr = res.data
        state.schemeParamsArr.push({ id: 0, name: '无' })
        // 参数方案名称
        state.floodParams = res.data[0].name
        // 参数方案id
        state.form.chlScid = res.data[0].id
      } else {
        state.floodParams = '无'
        state.form.chlScid = 0
        state.schemeParamsArr = []
      }
      if (state.model === -1) {
        state.paramConf.forEach((child, index) => {
          if (child.blkcd == state.secBlkcd) {
            state.paramConf.splice(index, 1, {
              ...child,
              chlMid: item,
              chlScid: res.data[0].id
            })
          }
        })
      } else {
        // state.paramConf = state.paramConf.map((child) => {
        //   return { ...child, chlMid: item }
        // })
        state.paramConf.forEach((child, index) => {
          if (child.blkcd == state.secBlkcd) {
            state.paramConf.splice(index, 1, {
              ...child,
              chlMid: item
              // chlScid: res.data[0].id
            })
          }
        })
        console.log(state.paramConf, '参数信息')
      }
    })
  }
}
// 修改方案
async function handleChangeParamsScheme(item) {
  state.paramConf.forEach((child, index) => {
    if (child.blkcd == state.secBlkcd) {
      state.paramConf.splice(index, 1, { ...child, chlScid: item })
    }
  })
  state.floodParams = state.schemeParamsArr.filter((e) => {
    return e.id == item
  })[0].name
  console.log(state.paramConf, state.floodParams, state.schemeParamsArr, '参数信息')
}
//获取所有断面参数信息
function getAreaSchemeConfigList(schemeId) {
  return new Promise((resolve, reject) => {
    getAreaSchemeConfig({ scid: schemeId }).then((res) => {
      if (res.code === 200) {
        state.areaConfig = res.data

        state.model = res.data.model
        handleChangeModel(state.model)
        resolve(state.areaConfig)
      }
    })
  })
}

//获取模型列表
function getModelArr(id) {
  getModelList({ typeId: id }).then((res) => {
    if (res.code === 200) {
      state.waterflood = res.data
      state.waterflood.push({ id: 0, modelName: '无' })
      if (state.waterflood.length) {
        handleChangeWaterFlood(state.waterflood[0].id)
        state.form.chlMid = state.waterflood[0].id
      }
    }
  })
}
//获取区域断面
function getSecList(id) {
  return new Promise((resolve, reject) => {
    getAreaSecList({ zid: id }).then((res) => {
      if (res.code === 200) {
        state.secList = res.data
        resolve(state.secList)
      }
    })
  })
}
//查看参数详情
let paramsDetail = ref({})
let showDialog = ref(false)
function handleSearchParams() {
  if (state.form.chlMid == 1) {
    paramsSkbyRef.value.handleOpenParams(undefined, state.secBlkcd, {
      paramsName: state.floodParams,
      paramsId: state.form.chlScid
    })
  } else if (state.form.chlMid == 2) {
    getXajParamsDetail({
      scid: state.form.chlScid
    }).then((res) => {
      if (res.code === 200) {
        paramsDetail.value = res.data
        if (res.data) {
          showDialog.value = true
          console.log('66', showDialog)
        }
      }
    })
  }
}
defineExpose({ handleOpenModal })
function handleClose() {
  dialogVisible.value = false
}
</script>

<style lang="less" scoped>
.area-scheme {
  .my-header {
    height: 35px;
    border-bottom: 2px solid #eee;
  }
  .name-box {
    display: flex;
    align-items: center;
    height: 30px;
    span {
      width: 100px;
    }
    :deep(.el-input) {
      width: 200px;
      margin-right: 20px;
    }
  }
  .config-info {
    width: 100%;
    height: 55vh;
    margin-top: 15px;
    .content-box {
      display: flex;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      .content-left {
        width: 150px;
        height: 100%;
        border-right: 2px solid #eee;
        .left-title {
          height: 40px;
          background: #eee;
          display: flex;
          justify-content: center;
          align-items: center;
          color: black;
        }
        .left-box {
          height: calc(100% - 40px);
          overflow-y: auto;
          .box-item {
            height: 30px;
            color: gray;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &.active {
              span:nth-of-type(1) {
                cursor: pointer;
                color: #409eff;
              }
            }
            &:hover {
              span:nth-of-type(1) {
                cursor: pointer;
                color: #409eff;
              }
            }
            span:nth-of-type(2) {
              color: #409eff;
              margin-right: 10px;
            }
          }
        }
      }
      .content-right {
        width: calc(100% - 150px);
        height: 100%;
        padding-left: 10px;
        .right-title {
          margin-bottom: 10px;
          span {
            color: #409eff;
          }
        }
        .right-box {
          width: 100%;
          height: calc(100% - 80px);
          :deep(.el-tabs--border-card) {
            height: 100%;
            .el-tabs__content {
              height: calc(100% - 60px);
              .el-tab-pane {
                height: 100%;
                .flood-form {
                  padding: 15px;
                  .form-item {
                    height: 50px;
                    .el-select {
                      width: 350px;
                    }
                    .btn-color {
                      cursor: pointer;
                      color: #409eff;
                      margin-left: 50px;
                    }
                    .name {
                      color: grey;
                      margin-right: 20px;
                    }
                  }
                }
              }
            }
          }
        }
        .footer-btn {
          text-align: right;
          margin-top: 10px;
        }
      }
    }
  }
}
</style>
